<template>
  <div class='slideBar-box'>
    <div class='slideBar-box-mask' v-if="showMask"></div>
    <div class="sidebar-top clearfix" v-if="normalData">
      <span class="fl" style="font-size:14px;">{{normalData.title}}</span>
       <div class='operation'>
         <span @click="changeToOldView"><i class="iconfont icon-qiehuanshitu"></i></span>
        <el-dropdown class="rel-operation" trigger="click" @command="plus" size="small">
            <span class="el-dropdown-link">
              <el-tooltip class="item" effect="dark" :content="$t('public.moreOper')" placement="bottom">
                <i class=" iconfont icon-gengduo"></i>
              </el-tooltip>
            </span>
          <el-dropdown-menu slot="dropdown" v-if="normalData.showDropDown">
            <el-dropdown-item v-for="(item, index) in normalData.jumpArr" v-show="item.show" :key="index"  :command="item.jumpUrl" :xiami="item.jumpUrl">{{item.text}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </div>
    </div>
    <div class="business-sidebar" :class="fullHeight ? 'full-height': ''">
      <div class="side-scroll">
        <scrollBar :topFlag="true" :top="40">
           <el-menu :default-active="sideBarData.defaultActive" :avtive='sideBarData.defaultActive' :default-openeds="defaultOpeneds" class="el-menu-vertical-demo" @select="submenuSelect">
             <el-submenu :index="index+''" v-for="(item, index) in sideBarData.submenuArr" :key="index">
               <template slot="title">
                 <span slot="title">{{item.submenuTitle}}</span>
               </template>
               <el-menu-item-group>
                 <div v-for='(menuItem, index2) in item.menu' :key="index2">
                    <el-menu-item :disabled="menuItem.disabled" v-if="!menuItem.hide" :index="item.type + menuItem.value" @click='menuItemClick(menuItem, item.type)'>
                      {{menuItem.label}}
                    </el-menu-item>
                 </div>
               </el-menu-item-group>
             </el-submenu>
          </el-menu>
        </scrollBar>
      </div>
    </div>
  </div>
</template>
<script>
  import scrollBar from '@/components/ui-modules/ScrollBar'
  export default {
    name: 'Sidebar',
    data () {
      return {
      }
    },
    props: {
      normalData: {type: Object, default: function () { return {} }},
      sideBarData: {type: Object, default: function () { return {} }},
      showMask: { type: Boolean, default: false },
      fullHeight: { type: Boolean, default: false },
      defaultOpeneds: { type: Array, default: () => [] }
    },
    computed: {
    },
    methods: {
      plus (value) {
        this.$emit('plus', value)
      },
      changeToOldView () {
        this.$emit('changeToOldView')
      },
      menuItemClick (item, activeName) {
        this.$emit('menuItemClick', item, activeName)
      },
      submenuSelect (value) {
        this.$emit('submenuSelect', value)
      }
    },
    components: {
      scrollBar
    }
  }
</script>
<style lang="stylus" scoped>
  .slideBar-box
    position relative
    .slideBar-box-mask
      position absolute
      width 100%
      height 100%
      background rgba(255,255,255,0.3)
      cursor not-allowed
      z-index 1000
    overflow hidden
    border-right 1px solid #ccc
  .operation
    margin-left 40px
    .iconfont
      margin 0 2px 0
      color #606266
      cursor pointer
    .icon-gengduo
      font-size 19px
  .sidebar-top
     border-bottom 1px solid #ccc
     padding 0px 6px 0px 18px
     height 40.5px
     line-height 43px
     display flex
     justify-content space-between
</style>
<style lang="stylus">
  @import "../../../assets/common.styl"
  .business-sidebar
    text-align left
    position relative
    background-color #f0f2f3
    width 188px
    height calc(100vh - 90px)
    float left
    .router-link-active
      li
        color $c-main !important
        background-color #dddee0 !important
    .side-scroll
      height calc(100vh - 90px)
    .el-menu
      background-color #f0f2f3
    .sidebar__title
      color #a0a9ad
      padding 10px 0
      border-bottom 1px solid #444c4f
    .el-menu__first
      font-weight bold
    .el-submenu
      .el-menu
        .el-menu-item
          padding-left 20px !important
        .el-menu-item:hover,.el-menu-item:focus
          color $c-main
          background-color #dddee0
    .sidebar-menu > .el-menu__first a li
      padding 15px 0px
      color $cf-gray0
    .sidebar-menu > .el-submenu
      color $cf-gray0
    .sidebar-menu .el-submenu li
      font-weight normal
      color #424242
    .sidebar-menu
      padding-top 5px
      margin-bottom 54px
    .el-menu-item
      height 45px
      line-height 14px
    .el-submenu__title
      height 44px
      line-height 44px
      font-weight bold
      color #000
     .el-submenu__title:hover,.el-submenu__title:focus
       color $c-main
       background-color #dddee0
     .el-submenu .el-menu .el-menu-item
       padding: 8px 0px;
       min-width: 100%;
       height: 30px;
     .config-sidebar__bottom
       position: absolute;
       width: 100%;
       height: 54px;
       bottom: 0px;
       z-index 2;
       background-color: #f5f6f7;
       border-top: 1px solid #e0e0e0;
       box-shadow: 0px -4px 6px -4px rgba(128,128,128,0.2);
       .config-sidebar__bottom-a
         background-color: #459ae9;
         color: #fff;
         border-radius: 4px;
         padding: 3px 7px;
      .el-menu-item:hover, .el-menu-item:focus
        color $c-main !important
        background-color #dddee0
        font-weight bold
  .el-menu-item-group__title
     display none
  .full-height
    height calc(100vh)
    .side-scroll
      height calc(100vh)
</style>
